<template>
  <Content>
    <span slot="header-text">动态</span>
    <div slot="main-content">
      <div class="content-img">
        <div class="content-item" v-for="(item,i) in dynamic" :key="i" @mouseenter="item.is_active = true"
          @mouseleave="item.is_active = false">
          <router-link class="box-products" style="display: block; position: relative;" to="./dynamic">
            <el-image ref="hotheight" :src="item.img" alt="" fit="cover" style="width: 400px; height: 280px"></el-image>
            <!-- <el-image v-show="!item.isActive" ref="hotheight" :src="item.Mask" alt="" fit="cover" style="width: 400px; height: 280px"></el-image> -->
            <div :class="{animationbox:item.is_active}" class="mask">
              <div class="products-e">
                <p v-html="item.EnglishName"></p>
              </div>
              <div class="products-tag">{{item.tag}}</div>
              <div class="products-title">
                <p v-html="item.title"></p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <el-button slot="button" round @click="$router.push('/dynamic')">更多动态+</el-button>
  </Content>
</template>

<script>
//components
//content
import Content from '@/components/content/Content.vue'
export default {
  components: {
    Content
  },
  props: {
    dynamic: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      newsData: [],
    }
  },
  methods: {

  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang='less' scoped>
.content-img {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: 100%;

  .content-item {
    width: 400px;
    height: 280px;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .mask {
      position: absolute;
      top: 0;
      opacity: 0;
      background: transparent;
      width: 100%;
      height: 100%;
    }
  }
}
.el-button {
  margin-top: 1rem;
}
.mask {
  background: #77b828;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 100%;
  height: 100%;
  .products-e {
    font-size: 0.8rem;
    p {
      margin-bottom: 2px;
    }
  }
  .products-tag {
    font-size: 0.8rem;
  }
  .products-tag::after {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background: #fff;
    margin: 0.6rem auto 0.3rem;
  }
  .products-title {
    font-size: 1.5rem;
    font-weight: 500;
    p {
      margin-top: 0.5rem;
    }
  }
}
// .content-item {
//   display: flex;
//   flex-wrap: wrap;
//   align-content: flex-start;
//   justify-content: center;
//   .content-list {
//     width: 400px;
//     cursor: pointer;
//     box-sizing: border-box;
//     .content-img {
//       width: 400px;
//       height: 280px;
//       overflow: hidden;
//       position: relative;
//       img {
//         position: absolute;
//         height: 100%;
//         left: 50%;
//         transform: translate(-55%, 0);
//       }
//     }

//     .content-text {
//       color: #dec6cb;
//       padding: 10px;
//       height: 300px;
//       border: 1px solid #dec6cb;

//       margin-top: -1px;
//       .content-text-tag {
//         font-size: 0.8rem;
//         display: inline-block;
//         border-bottom: 1px solid #dec6cb;
//         padding-bottom: 0.4rem;
//       }
//       .content-text-title {
//         font-size: 1.9rem;
//         font-weight: 400;
//         line-height: 2.5rem;
//         word-wrap: break-word;
//       }
//     }
//   }

//   .content-list:hover {
//     .content-text {
//       color: #660033;
//       background: #dec6cb;
//       .content-text-tag {
//         border-bottom: 1px solid #660033;
//       }
//     }
//   }
// }
// .el-image {
//   width: 100%;
//   height: 100%;
// }
// .el-button {
//   color: #660033;
// }

// @media only screen and (max-width: 992px) {
//   .content-text {
//     border: 1px solid #dec6cb;
//   }
// }

// @media only screen and (max-width: 768px) {
//   .content-item{
//     .content-list{
//       margin-bottom: 20px;
//     }
//   }
// }
</style>